<!doctype html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <title>instanceOfType</title>
  <script src="../../../webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="../../polymer.html">
  <script src="../../../tools/test/htmltest.js"></script>
  <script src="../../../tools/test/chai/chai.js"></script>
</head>
<body>
  <x-foo></x-foo>
  <hr>

  <x-bar></x-bar>
  <hr>

  <x-zot></x-zot>
  <hr>

  <x-zap></x-zap>
  <hr>

  <x-fizz></x-fizz>
  <hr>

  <x-zzif></x-zzif>
  <hr>

  <li is="my-li"></li>
  <hr>
  <li is="my-sub-li"></li>

  <!-- script follows declaration -->
  <polymer-element name="x-foo" constructor="XFoo">
    <template>
      Hello Light World
    </template>
  </polymer-element>

  <!-- script following declaration -->
  <script>
    Polymer('x-foo', {
      ready: function() {
        this.squid = 'ink';
      }
    });
  </script>

  <!-- script embedded in declaration -->
  <!-- super script follows declaration -->
  <polymer-element name="x-bar" extends="x-foo" noscript>
    <template>
      Hello Lighter World [<shadow></shadow>]
    </template>
  </polymer-element>

  <!-- no script extends w/script -->
  <!-- super script follows declaration -->
  <polymer-element name="x-quux" extends="x-foo" noscript>
    <template>
      Quux's Shadow Content [<shadow></shadow>]
    </template>
  </polymer-element>

  <!-- no script -->
  <polymer-element name="x-zot" noscript>
    <template>
      Zot's Shadow Content
    </template>
  </polymer-element>

  <!-- no script extends no script -->
  <polymer-element name="x-zap" extends="x-zot" noscript>
    <template>
      Zap's Shadow Content [<shadow></shadow>]
    </template>
  </polymer-element>

  <!-- script embedded in declaration -->
  <!-- script extends no script -->
  <polymer-element name="x-zzif" extends="x-zap">
    <template>
      Zzif's Shadow Content [<shadow></shadow>]
    </template>
    <script>
      Polymer('x-zzif', {
        ready: function() {
          this.squid = 'zink';
        }
      });
    </script>
  </polymer-element>

  <!-- script preceeding declaration -->
  <script>
    Polymer('x-fizz', {
      ready: function() {
        this.squid = 'fink';
      }
    });
  </script>

  <!-- w/script extends no script -->
  <!-- script preceeds declaration -->
  <polymer-element name="x-fizz" extends="x-zap">
    <template>
      Fizz's Shadow Content [<shadow></shadow>]
    </template>
  </polymer-element>

  <!-- async script -->
  <polymer-element name="x-blarg">
    <template>
      Blarg's Shadow Content (async)
    </template>
    <!-- async script -->
    <script>
      addEventListener('HTMLImportsLoaded', function() {
        setTimeout(function() {
          Polymer('x-blarg', {
            ready: function() {
              this.squid = 'bink';
            }
          });
        });
      });
    </script>
  </polymer-element>

  <polymer-element name="my-li" extends="li" constructor="MyLi">
    <template>
      Hello World
    </template>
    <script>
      Polymer('my-li', {
        custom: true
      });
    </script>
  </polymer-element>

  <polymer-element name="my-sub-li" extends="my-li" constructor="MySubLi" noscript>
    <template>
      Hello Sub World
    </template>
  </polymer-element>

  <script>
    addEventListener('polymer-ready', function() {
      var assert = chai.assert;
      var foo = document.querySelector('x-foo');
      assert.isTrue(Polymer.instanceOfType(foo, 'x-foo'));
      //      
      var bar = document.querySelector('x-bar');
      assert.isTrue(Polymer.instanceOfType(bar, 'x-bar'));
      assert.isTrue(Polymer.instanceOfType(bar, 'x-foo'));
      //
      var zot = document.querySelector('x-zot');
      assert.isTrue(Polymer.instanceOfType(zot, 'x-zot'));
      assert.isFalse(Polymer.instanceOfType(zot, 'x-foo'));
      //
      var zap = document.querySelector('x-zap');
      assert.isTrue(Polymer.instanceOfType(zap, 'x-zap'));
      assert.isTrue(Polymer.instanceOfType(zap, 'x-zot'));
      //i
      var fizz = document.querySelector('x-fizz');
      assert.isTrue(Polymer.instanceOfType(fizz, 'x-fizz'));
      assert.isTrue(Polymer.instanceOfType(fizz, 'x-zap'));
      assert.isTrue(Polymer.instanceOfType(fizz, 'x-zot'));
      //
      var zzif = document.querySelector('x-zzif');
      assert.isTrue(Polymer.instanceOfType(zzif, 'x-zzif'));
      assert.isTrue(Polymer.instanceOfType(zzif, 'x-zap'));
      assert.isTrue(Polymer.instanceOfType(zzif, 'x-zot'));
      assert.isFalse(Polymer.instanceOfType(zzif, 'x-fizz'));
      //
      var myLi = document.querySelector('[is=my-li]');
      assert.isTrue(Polymer.instanceOfType(myLi, 'my-li'));
      //
      var mySubLi = document.querySelector('[is=my-sub-li]');
      assert.isTrue(Polymer.instanceOfType(mySubLi, 'my-sub-li'));
      assert.isTrue(Polymer.instanceOfType(mySubLi, 'my-li'));
      done();
    });
  </script>
  
</body>
</html>
